console.log("hello webpack");

import "./styles/index.css";
import "./styles/index.scss";
import "./styles/index.less";

import pic from "./images/demo.png";
const img = new Image();
img.src = pic;
const root = document.getElementById("app");
root.append(img);

console.log("source map");

import axios from "axios";
axios.get("/api/info").then((res) => {
  console.log(res);
});

// css hmr //
var btn = document.createElement("button");
btn.innerHTML = "新增";
root.appendChild(btn);

btn.onclick = function () {
  var div = document.createElement("div");
  div.innerHTML = "item";
  div.className = "item";
  root.appendChild(div);
};

// js hmr
import counter from "./counter";
import number from "./number";
counter();
number();
console.log("module.hot", module.hot);

if (module.hot) {
  //是否开启HMR
  console.log("开启HMR");
  module.hot.accept("./number.js", function () {
    //先移除number创建的div模块
    document.body.removeChild(document.getElementById("number"));
    //再用number模块创建一个新的div模块
    number();
  });
}

// babel
// 编译 es6+
// import "@babel/polyfill";
const arr = [new Promise(() => {}), new Promise(() => {})];
arr.map((item) => {
  console.log(item);
});
// 原始：26 kb
// polyfill：1000 kb
// usage：351 KiB

// 编译 react
import React, { Component } from "react";
import ReactDom from "react-dom";

class ReactApp extends Component {
  render() {
    return <div>Hello React!</div>;
  }
}

ReactDom.render(<ReactApp />, document.getElementById("reactRoot"));

// 编译 Vue
import Vue from 'vue'
import VueApp from './babelVueTest.vue'

new Vue({
    render: h => h(VueApp)
}).$mount('#vueRoot')